<template>
<div class="login_content">
	<div class="box">
		<div class="avater">
			<img src="../assets/logo.png" alt="">
		</div>
		<el-form ref="loginFormRef" :rules="loginFormRules" :model="loginForm" label-width="0px" class="login_form">
		<!-- 用户 -->
			<el-form-item prop="username">
				<el-input name="username" v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
				</el-form-item>
		<!-- 密码 -->
			<el-form-item prop="password">
				<el-input name="password" type="password" v-model="loginForm.password" prefix-icon="el-icon-lock"></el-input>
			</el-form-item>
		<!-- 按钮 -->
			<el-form-item class="btns">
				<el-button type="primary" @click="login">登录</el-button>
				<el-button type="info" @click="reset">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</div>
</template>

<script>
import loginApi from '../request/login.js'
export default {
  data () {
    return {
      loginForm: { username: 'admin', password: '123456' },
      loginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    reset () {
      this.$refs.loginFormRef.resetFields()
    },
    login () {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await loginApi.loginApiUser(this.loginForm)  // this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) return this.$message.error('登陆失败')
        this.$message.success('登陆成功')
        // 登陆成功后保存token 保存在客户顿sessionstorage
        // 项目中其他的接口 必须在登陆后才能访问
        // token只能在当前网站打开期间生效
        window.sessionStorage.setItem('token', res.data.token)
        // 2. 跳转页面到后台主页 /home
        this.$router.push('/home')
      })
    }
  }
}
</script>

<style scoped="scoped">
.btns{
	display: flex;
	justify-content: flex-end;
}
.login_content{
	background: #2b4b6b;
	height: 100%;
}
.avater{
	background: #fff;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	padding: 10px;
	border: 1px solid #eee;
	box-shadow: 0 0 10px #ddd;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%,-50%);
}
.avater img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #eee;
}
.box{
	width: 450px;
	height: 300px;
	border-radius: 3px;
	background: #fff;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.login_form{
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}
</style>
